<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻列表</title>
    <style>
        #app {
            font-family: Arial, sans-serif;
            width: 80%;
            margin: 0 auto;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
        }
        
        th,
        td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
        
        .tar {
            background-color: rgb(17, 156, 211);
            color: aliceblue;
        }
        
        button {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #d32f2f;
        }
        
        input {
            padding: 6px;
            margin: 5px;
        }
        
        tr:hover {
            background-color: #e0f7fa;
        }
    </style>
</head>

<body>
    <div id="app">
        <input v-model="newItem.name" placeholder="请输入名称">
        <input v-model="newItem.img" placeholder="请输入链接">
        <input v-model="newItem.Description" placeholder="请输入描述">
        <button @click="addItem">添加</button>
        <table>
            <thead>
                <tr class="tar">
                    <th>名称</th>
                    <th>链接</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in user" :key="item.id" v-color-change="index">
                    <td>{{ item.name }}</td>
                    <td><a :href="item.img">{{ item.img }}</a></td>
                    <td>{{ item.Description }}</td>
                    <td><button @click="deleteItem(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        Vue.directive('color-change', {
            bind: function(el, binding) {
                if (binding.value % 2 === 0) {
                    el.style.backgroundColor = '#f2f2f2';
                }
            }
        });

        const vm = new Vue({
            el: "#app",
            data: {
                user: [{
                    id: 1,
                    name: '三角洲行动',
                    img: 'https://df.qq.com/index.shtml',
                    Description: '战术摸金射击，精准打击，全方位打击，全面开花'
                }, {
                    id: 2,
                    name: '暗区突围',
                    img: 'https://aqtw.qq.com/web202206/index.html',
                    Description: '硬核射击，老六出击，全方位突破，全面展开'
                }, {
                    id: 3,
                    name: '萤火突击',
                    img: 'https://yhtj.163.com/#/',
                    Description: '无限射击，全方位突破，全面展开，一触即发'
                }, {
                    id: 4,
                    name: '刺激战场-和平精英',
                    img: 'https://gp.qq.com/',
                    Description: '和平暖暖，和平共处，和平竞技，和平进步'
                }, {
                    id: 5,
                    name: '逃离塔科夫',
                    img: 'https://arena.tarkov.com/',
                    Description: '刺激枪战，超标人机，挂个丛生，全方位科技突破'
                }],
                newItem: {
                    name: '',
                    img: '',
                    Description: ''
                }
            },
            methods: {
                addItem() {
                    if (this.newItem.name && this.newItem.img && this.newItem.Description) {
                        const newId = this.user.length > 0 ? this.user[this.user.length - 1].id + 1 : 1;
                        const newData = {
                            id: newId,
                            ...this.newItem
                        };
                        this.user.push(newData);
                        this.newItem = {
                            name: '',
                            img: '',
                            Description: ''
                        };
                    }
                },
                deleteItem(index) {
                    this.user.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>